<template>
  <div id="home" :class="'home-' + (paths.length > 1  && !hideNav ? '2': '1')">
    <!-- header -->
    <div class="header">
      <div class="header-logo lw">
        <div class="logo">
          <router-link to="/">SNMP采集系统</router-link>
        </div>
        <div class="text" >SNMP采集系统</div>
      </div>
      <!-- header-nav -->
      <div class="header-nav">
        <router-link :to="{path : '/'}" >
           <span class="f12">总览</span>
        </router-link>
        <div class="iconbtn" style="margin-right:30px;">
           <i class="el-icon-menu"></i>
           <span>导航&nbsp;</span>
          <div class="over-box" style="width:200px;">
            <ul>
              <li v-for="(item, index) in navList" :class="{'cur': (paths[0] && paths[0] == item.path)}" :key="index">
                <router-link :to="{path : item.path}">
                  {{ item.name }}                  
                </router-link>

                <span class="vbtn" v-if="0">
                  <el-button icon="el-icon-minus" circle size="mini" @click.stop="addSubNavFav(item.path)" v-if="navFav.indexOf(item.path) != -1"></el-button>
                  <el-button icon="el-icon-plus" type="primary" circle size="mini" @click.stop="addSubNavFav(item.path)" v-else></el-button>
                </span>
              </li>
            </ul>

          </div>
        </div>
        <router-link :to="{path : item.path}" v-for="(item, index) in navList" :class="{'cur': (paths[0] && paths[0] == item.path)}" v-if="navFav.indexOf(item.path) != -1"
           :key="index">
           <i :class="item.icon" style="display: none;"></i>
           <span>{{item.name}}</span>
        </router-link>
      </div>
      <!-- end header-nav -->
      <!-- header-right -->
      <div class="header-right">
        <!-- 账户 -->
        <div class="iconbtn">
          <i class="el-icon-user f20"></i> {{ userName }}
          <div class="over-box">
            <ul>
              <li>
                <router-link to="">
                <span class="avatar">{{ userName.substr(0, 1) }}</span>
                {{ userName }}
                </router-link>
              </li>
              <li class="line"></li>
              <li>
                <router-link to="">
                  设置
                </router-link>
              </li>
              <li>
                <router-link to="">
                  修改密码
                </router-link>
              </li>
              <li>
                <a href="/admin">
                  管理
                </a>
              </li>
              <li>
                <a href="javascript:void(0)" @click.stop="logOut">
                  退出
                </a>
              </li>
            </ul>
          </div>
        </div>
        <!-- end账户-->

        <!-- 提醒通知 -->
        <div class="iconbtn">      
          <i class="el-icon-message f20"><el-badge :value="3"></el-badge></i>
          <div class="over-box">
            <ul>
              <li>
                <router-link to="">
                  待审素材<el-badge :value="3"></el-badge>
                </router-link>
              </li>
              <li>
                <router-link to="">
                  待审账户{{ $config('asdfasdfas') }}
                </router-link>
              </li>
            </ul>

          </div>
        </div>
        <!-- 提醒通知结束 -->

        <!-- 最近操作历史 -->
        <div class="iconbtn">      
          <i class="el-icon-stopwatch f20"></i>
          <div class="over-box">
            <ul>
              <li v-for="(item, index) in navHistory" :key="index">
                <router-link :to="{path: item.split('#|#')[0]}">
                  {{ item.split('#|#')[1] }}
                </router-link>
              </li>
              <li class="line"></li>
              <li><a href="javascript:void(0)" @click.stop="navHistory=[]">清空</a></li>
            </ul>

          </div>
        </div>
        <!-- 最近操作历史结束 -->        
      </div>
      <!-- end header-right -->
    </div>
    <!-- end header -->

    <!-- left nav -->    
    <div class="leftnav" v-if="paths.length > 1 && !hideNav">
      <div class="navtitle" v-if="pathNames[0]">
        {{ pathNames[0] }}
      </div>
      <div class="navbox">
        <template v-for="item in navList"  v-if="paths[0] && paths[0] == item.path">
          <dl v-for="(nav, index) in item.childrens" :key="index">
            <template v-if="nav.childrens.length > 0">
              <dt @click.stop="showHideSubNav(nav.path)"><i :class="nav.icon + ' icon'"></i>&nbsp;&nbsp;{{ nav.name }}
                <i :class="hideSubNav.indexOf(nav.path) == -1 ? 'el-icon-arrow-down arrow' : 'el-icon-arrow-up arrow'"></i>
              </dt>
              <dd v-for="(child, index1) in nav.childrens" :key="index1" class="sub" v-show="hideSubNav.indexOf(nav.path) == -1">
              <router-link :class="{'cur': (paths[2] && paths[2] == child.path)}" :to="{path: child.path}">{{ child.name }}</router-link>
              </dd>
            </template>
            <template v-else>
              <dd><router-link :class="{'cur': (paths[1] && paths[1] == nav.path)}" :to="{path: nav.path}"><i :class="nav.icon + ' icon'" v-if="nav.icon"></i> {{ nav.name }}</router-link></dd>
            </template>            
          </dl>
        </template>
        
      </div>
    </div>
    <div :class="hideNav ? 'show-nav-btn' : 'hide-nav-btn'" v-if="paths.length > 1">
      <a href="javascript:void(0)" @click.stop="showHideNav">&nbsp;</a>
    </div>
    <!-- end left nav -->
    <!-- content -->
    <div class="view-wrap">
      <router-view></router-view>
    </div>
    <!-- content 结束 -->
  </div>
</template>

<script>
import { SCREEN_CHANGE, SHOW_TOKEN_ERROR } from "@store/mutation-types"
import { mapGetters, mapActions } from "vuex"
import cache from "@cache";
import {cacheConfig, cacheUserinfo} from "@cache"
export default {
  name: "home",
  data() {
    return {
      purview: "",
      navList: [],
      userInfo: {},
      userName: '',
      historyNav: [],
      paths: [],
      pathNames: [],
      navHistory: [],
      navFav: [],
      hideSubNav: [],
      hideNav: false
    };
  },
  watch: {
    tokenError(value) {
      if (value) {
        this.$store.commit(SHOW_TOKEN_ERROR, false)
        this.message = this.$error("账号过期，请重新登录")
      }
    },
    isLogin(value) {
      if (!value) {
        this.$router.push({ name: "login" })
      }
    },
    $route(to, from){
      this.initPath(to.path)      
    }
  },
  computed: {
    ...mapGetters(["isLogin", "tokenError", "userinfo"])
  },
  methods: {
    ...mapActions(["signOut"]),
    logOut () {
      this.signOut();
      this.$router.push({ path: "/login" })
    },
    initPath (path) {
      let that = this
      that.paths = []
      if (that.navList) {
        // 一级导航循环
        for (let i = 0; i < that.navList.length; i ++) {
          if (path.indexOf(that.navList[i].path) == 0) {
            that.paths[0] = that.navList[i].path
            that.pathNames[0] = that.navList[i].name
          }
          // 二级导航循环
          for (let j = 0; j < that.navList[i].childrens.length; j ++) {
            if (path.indexOf(that.navList[i].childrens[j].path) == 0) {
              that.paths[0] = that.navList[i].path
              that.pathNames[0] = that.navList[i].name
              that.paths[1] = that.navList[i].childrens[j].path
              that.pathNames[1] = that.navList[i].childrens[j].name
            }
            // 第三级导航
            for (let k = 0; k <  that.navList[i].childrens[j].childrens.length; k ++) {
              if (path.indexOf(that.navList[i].childrens[j].childrens[k].path) == 0) {
                that.paths[0] = that.navList[i].path
                that.pathNames[0] = that.navList[i].name
                that.paths[1] = that.navList[i].childrens[j].path
                that.pathNames[1] = that.navList[i].childrens[j].name
                that.paths[2] = that.navList[i].childrens[j].childrens[k].path
                that.pathNames[2] = that.navList[i].childrens[j].childrens[k].name
              }
            }
          }
        }
      }
      // 计入历史
      if (that.paths.length > 0) {
        let hnav = that.paths[that.paths.length - 1] + '#|#' + that.pathNames[that.paths.length - 1]
        if (that.navHistory.indexOf(hnav) === -1) {
          that.navHistory.unshift(hnav)
          if (that.navHistory.length > 15) {
            that.navHistory = that.navHistory.slice(0, 15)
          }
        }
      }   
    },
    //获取用户信息
    getUserInfo () {
      this.$api.get("user.get_userinfo").then(res => {
        if (res.status === 1) {
          this.purview = res.data.purview
          this.userInfo = res.data
          this.userName = res.data.realname || res.data.uname || res.data.email || res.data.mobile
          cache.set("purview", this.purview)
          cacheUserinfo.save(res.data)
        }
      })
    },
    getCfg () {
      this.$api.get("admin.get_cfg").then(res=>{
        if(res.status==1){
          cacheConfig.save(res.data)
        }
      }).catch(()=>{

      })
    },
    getNav () {
      this.$api.get("admin.get_nav").then(res=>{
        if(res.status==1){
            this.navList=res.data
            this.initPath(this.$route.path)
        }
      }).catch(()=>{

      })
    },
    showHideNav () {
      this.hideNav = !this.hideNav
    },
    showHideSubNav (path) {
      let indexof = this.hideSubNav.indexOf(path)
      if (indexof === -1) {
        this.hideSubNav.push(path)
      } else {
        this.hideSubNav.splice(indexof, 1)
      }
    },
    addSubNavFav (path) {
      let indexof = this.navFav.indexOf(path)
      if (indexof === -1) {
        this.navFav.push(path)
      } else {
        this.navFav.splice(indexof, 1)
      }
      if (this.navFav.length > 5) {
        this.navFav = this.navFav.slice(-5)
      }
      cache.set('navFav', this.navFav)
      return false
    }
  },
  mounted () {    
    this.getUserInfo()
    this.getNav()
    this.getCfg()
    this.navFav = cache.get('navFav') || []
  }
};
</script>
<style scoped lang="scss">

</style>

